<template>
  <a-tabs v-model:active-key="tabsActive" trigger="click" @change="tabChange">
    <a-tab-pane v-for="item in props.tabList" :key="'tab' + item.value">
      <template #title>
        <a-space v-if="isShowNum" :size="8">
          <span>{{ item.label }}</span>
          <a-badge :count="item.count" />
        </a-space>
        <span v-else>{{ item.label }}</span>
      </template>
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts" setup>
  import { ref, defineProps, watch, defineEmits } from 'vue';

  const emit = defineEmits(['update:value']);
  const props = defineProps({
    isShowNum: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String,
      default: '',
    },
    tabList: {
      type: Array<any>,
      default: () => [],
    },
  });
  const tabsActive = ref('');

  const tabChange = () => {
    emit('update:value', tabsActive.value.replace('tab', ''));
  };

  watch(
    () => props.value,
    () => {
      tabsActive.value = `tab${props.value}`;
    },
    {
      immediate: true,
    }
  );
</script>

<style lang="less" scoped>
  :deep(.arco-tabs-nav-type-line .arco-tabs-tab) {
    margin: 0;
    padding: 12px 16px !important;
  }

  :deep(.arco-badge-number) {
    color: #1e2228;
    background-color: #e4e7ed !important;
  }

  :deep(.arco-tabs-tab-active) {
    color: #1e89ff;

    .arco-badge-number {
      color: rgb(255 255 255 / 90%);
      background-color: #1e89ff !important;
    }
  }
</style>
